<script setup>
import { useRouter } from "vue-router"

const { push } = useRouter()

defineProps({
  menuData: {
    type: Array,
    required: true
  }
})

function handleMenuClick(name) {
  push(name)
}
</script>

<template>
  <template v-for="item in menuData" :key="item.path">
    <!-- 有子菜单 -->
    <el-sub-menu v-if="item.children && item.children.length" :index="item.path">
      <template #title>
        <SvgIcon v-if="item.meta?.svgIcon" :name="item.meta.svgIcon" />
        <span>{{ item.meta?.title }}</span>
      </template>
      <SidebarItem :menu-data="item.children" />
    </el-sub-menu>

    <!-- 无子菜单 -->
    <el-menu-item v-else :index="item.path" @click="() => handleMenuClick(item.path)">
      <SvgIcon v-if="item.meta?.svgIcon" :name="item.meta.svgIcon" />
      <template #title>{{ item.meta?.title }}</template>
    </el-menu-item>
  </template>
</template>

<style lang="scss" scoped>
.svg-icon {
  min-width: 1em;
  margin-right: 12px;
  font-size: 18px;
}

.el-icon {
  width: 1em !important;
  margin-right: 12px !important;
  font-size: 18px;
}
</style>
